{% extends "base.html" %}

{% load user_tags %}

{% block main %}
    <div class="container">
        <div class="my-3 p-3 bg-white rounded box-shadow">
            <h6 class="border-bottom border-gray pb-2 mb-0">全部书友</h6>



            {% for user in users %}
                {% check_is_following_user request user as is_following%}
                <div class="media text-muted pt-3">
                  <a href="{{ user.get_absolute_url }}">
                      <img src="{{ user.avatar.url }}" alt="" class="mr-2 rounded" style="width: 32px; height: 32px;">
                  </a>

                  <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                    <div class="d-flex justify-content-between align-items-center w-100">
                      <strong class="text-gray-dark">{{ user }}</strong>
                      {% ifnotequal user request.user %}
                           <a class="{% if is_following %}text-success{% endif %}" id="follow-user-{{ user.id }}" href="javascript:void(0)"
                            data-login="{% if not request.user.is_authenticated %}un{% endif %}login"
                            data-action="{% if is_following %}un{% endif %}follow"
                            onclick="FollowUser({{ user.id }})">
                            {% if is_following %}
                                <i class="fa fa-check"></i> 已关注
                            {% else %}
                                <i class="fa fa-plus"></i> 关注
                            {% endif %}
                        </a>
                       {% endifnotequal %}
                    </div>
                    <span class="d-block">{{ user.signature }}</span>
                  </div>
                </div>
            {% endfor %}

            <div class="media text-muted pt-3">
              <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
              <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                <div class="d-flex justify-content-between align-items-center w-100">
                  <strong class="text-gray-dark">Full Name</strong>
                  <a href="#">Follow</a>
                </div>
                <span class="d-block">@username</span>
              </div>
            </div>
            <div class="media text-muted pt-3">
              <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
              <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                <div class="d-flex justify-content-between align-items-center w-100">
                  <strong class="text-gray-dark">Full Name</strong>
                  <a href="#">Follow</a>
                </div>
                <span class="d-block">@username</span>
              </div>
            </div>
            <div class="media text-muted pt-3">
              <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
              <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                <div class="d-flex justify-content-between align-items-center w-100">
                  <strong class="text-gray-dark">Full Name</strong>
                  <a href="#">Follow</a>
                </div>
                <span class="d-block">@username</span>
              </div>
            </div>
            <small class="d-block text-right mt-3">
              <a href="#">全部书友</a>
            </small>
        </div>
    </div>
{% endblock %}